<template>
  <div>
    <a-form :form="form">
      <a-form-item>
        <a-input
          placeholder="账号"
          autocomplete="off"
          v-decorator="[
            'username',
            {
              rules: [{ required: true, message: '用户名不能为空!' }]
            }
          ]"
        >
        </a-input>
      </a-form-item>

      <a-form-item>
        <a-input
          type="password"
          placeholder="密码"
          autocomplete="new-password"
          ref="password"
          @keydown.enter.native="handleSubmit"
          v-decorator="[
            'password',
            {
              rules: [{ validator: validatePassword }]
            }
          ]"
        >
        </a-input>
      </a-form-item>

      <a-form-item style="margin: 44px 0 12px;">
        <a-button type="primary" :loading="loginBtn" class="login-btn" @click="handleSubmit">登录</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { findPhone } from '@/api/user'
import { validatePassword } from '@/utils/validate'
import { encryption } from '@/utils/util'
export default {
  name: 'LoginForm',
  data () {
    return {
      loginBtn: false,
      model: {}
    }
  },
  props: {
    params: {
      type: Object,
      required: false,
      default: () => {}
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  watch: {
    params: {
      handler (val) {
        if (val) {
          const { username, password } = val
          this.$nextTick(() => {
            this.form.setFieldsValue({
              username,
              password
            })
          })
        }
      },
      immediate: true
    }
  },

  methods: {
    // 获取手机号
    handleSubmit () {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.model = Object.assign({}, values)
          // if (this.isLocking(values.username)) {
          //   // 用户已被锁定
          //   return
          // }
          this.loginBtn = true
          const params = encryption({ data: values, key: 'pigxpigxpigxpigx', param: ['password'] })
          // 验证短信验证码
          findPhone(params)
            .then(res => {
              if (res.code === 0) {
                this.unLockingUser(params.username)
                this.$emit('stepChange', 3)
                this.$emit('getLoginInfo', Object.assign({}, this.model, { mobile: res.data }))
              } else {
                this.$notification.error({
                  message: '提示',
                  description: res.msg
                })
                this.lockingUser(values.username)
              }
            })
            .catch(() => (this.loginBtn = false))
            .finally(() => {
              this.loginBtn = false
            })
        }
      })
    },

    // 验证用户是否被锁定
    isLocking (name) {
      const locking = this.$ls.get('User_Locking')
      if (locking[name] && locking[name]['num'] >= 5) {
        if (locking[name].expire - Date.now() > 0) {
          // 处于锁定时间中
          this.$message.error(
            `用户已经被锁定，请于${Math.ceil((locking[name].expire - Date.now()) / (60 * 1000))}分钟之后再试`
          )
          return true
        } else {
          this.unLockingUser(name)
          return false
        }
      } else {
        return false
      }
    },

    // 锁定用户
    lockingUser (name) {
      const locking = this.$ls.get('User_Locking')

      let userLocking = locking[name]

      if (userLocking) {
        if (userLocking.num === 4) {
          userLocking.num += 1
          userLocking.expire = Date.now() + 10 * 60 * 1000 // 锁定时间为10分钟
        } else {
          userLocking.num += 1
        }
      } else {
        locking[name] = { num: 1 }
      }

      this.$ls.set('User_Locking', locking)
    },

    // 解锁用户
    unLockingUser (name) {
      const locking = this.$ls.get('User_Locking')
      if (locking[name]) {
        delete locking[name]
      }
      this.$ls.set('User_Locking', locking)
    },

    validatePassword
  }
}
</script>

<style lang="less" scoped>
.login-btn {
  width: 100%;
  font-size: 14px;
}
</style>
